<template>
  <div class="myPage">
    <search-form :keys="keys"
                 @delTag="delBat" @add="add" @addPlan="planTag"></search-form>
    <el-table
        :data="tableData"
        style="width: 100%">
      <!--   1,2,3       -->
      <el-table-column
          v-if="status.includes('mtmc')"
          prop="date"
          label="码头名称"
          width="120">
      </el-table-column>

      <el-table-column
          v-if="status.includes('qfh')"
          prop="date"
          label="铅封号"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="status.includes('xhzz')"
          prop="date"
          label="箱货总重（吨）"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="status.includes('ysfs')"
          prop="date"
          label="运输方式"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="status.includes('wxp')"
          prop="date"
          label="危险品类别"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="status.includes('wxpun')"
          prop="date"
          label="危险品联合国代码"
          width="160">
      </el-table-column>
      <el-table-column
          v-if="status.includes('temp')"
          prop="date"
          label="温度"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="status.includes('tempU')"
          prop="date"
          label="温度单位"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="status.includes('csdm')"
          prop="date"
          label="残损代码"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="status.includes('gyc')"
          prop="date"
          label="工原残"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="status.includes('fjcz')"
          prop="date"
          label="附加操作"
          width="120">
      </el-table-column>

      <el-table-column
          v-if="status.includes('cxbz')"
          prop="date"
          label="超限标志"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="status.includes('qcc')"
          prop="date"
          label="前超长（米）"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="status.includes('hcc')"
          prop="date"
          label="后超长（米）"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="status.includes('zcc')"
          prop="date"
          label="左超长（米）"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="status.includes('ycc')"
          prop="date"
          label="右超长（米）"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="status.includes('cg')"
          prop="date"
          label="超高（米）"
          width="120">
      </el-table-column>

      <!--   1,3   -->
      <el-table-column
          v-if="status.includes('mtzyq')"
          prop="province"
          label="码头作业区"
          width="120">
      </el-table-column>
      <!--  1,2,3    -->
      <el-table-column
          v-if="status.includes('jhh')"
          prop="name"
          label="计划号"
          width="120">
      </el-table-column>
      <!--   1   -->
      <el-table-column
          v-if="status.includes('jjh')"
          prop="province"
          label="旧计划号"
          width="120">
      </el-table-column>
      <!--   1   -->
      <el-table-column
          v-if="status.includes('mylx')"
          prop="city"
          label="贸易类型"
          width="120">
      </el-table-column>
      <!--  1    -->
      <el-table-column
          v-if="status.includes('fczyq')"
          prop="zip"
          label="返场作业区"
          width="120">
      </el-table-column>
      <!--  1,2,3    -->
      <el-table-column
          v-if="status.includes('jhzt')"
          prop="zip"
          label="计划状态"
          width="120">
      </el-table-column>
      <!--  1,2,3    -->
      <el-table-column
          v-if="status.includes('mtjhh')"
          prop="zip"
          label="码头计划号"
          width="120">
      </el-table-column>
      <!--   1   -->
      <el-table-column
          v-if="status.includes('jkhc')"
          prop="zip"
          label="进口船名航次"
          width="120">
      </el-table-column>
      <!--   3   -->
      <el-table-column
          v-if="status.includes('tdh')"
          prop="zip"
          label="提单号"
          width="120">
      </el-table-column>
      <!--  1,2,3    -->
      <el-table-column
          v-if="status.includes('kssj')"
          prop="zip"
          label="计划开始时间"
          width="120">
      </el-table-column>
      <!--  1,2,3    -->
      <el-table-column
          v-if="status.includes('jssj')"
          prop="zip"
          label="计划结束时间"
          width="120">
      </el-table-column>
      <!--  1,2,3    -->
      <el-table-column
          v-if="status.includes('jhx')"
          prop="zip"
          label="计划箱（个）"
          width="120">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="300">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small" style="color: #1955CF">查看计划</el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="small" style="color: #1955CF">查看计划箱</el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="small" style="color: #1955CF">取消计划</el-button>
          <el-button type="text" size="small" style="color:  #eb2a2a">删除计划</el-button>
        </template>
      </el-table-column>
      <template slot="empty">
        <!--        <img src="../../../assets/empty.png" style="width: 300%;"/>-->
        <div style="width: 500px;height: 500px;line-height: 500px">暂无数据</div>
      </template>
    </el-table>
    <el-dialog
        :title="title"
        :before-close="cancelForm"
        :visible.sync="dialog"
        width="50%"
        custom-class="demo-drawer"
        ref="drawer">
      <div class="demo-drawer__content" style="display: flex;flex-wrap: wrap;
      flex-direction: column;align-content: space-around">
        <form-list v-show="showT" :showEd="!see" @cal="dialog=false"
                   @sub="submit" ref="formList" :keys="['form7']"></form-list>
        <form-list2 v-show="!showT" :showEd="!see" @cal="dialog=false"
                    @sub="showT=true" ref="formList1" :keys="listKeys"></form-list2>
      </div>
    </el-dialog>
    <div style="display: flex;flex-direction: row-reverse;margin-top: 10px">
      <el-pagination
          background
          :total="5"
          layout="prev, pager, next">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import formList2 from "@/views/businessProcessing/unloadLift/moudel/formList2";
import formList from "@/views/businessProcessing/unloadLift/moudel/formList";
import searchForm from "@/views/businessProcessing/module/searchForm";
export default {
  name: "bulkCargo",
  components:{
    searchForm,
    formList,
    formList2
  },
  data() {
    return {
      showT:false,
      listKeys:['form5'],
      status:[],//['mtmc','mtzyq','jhh','jjh','mylx','fczyq','jhzt','mtjhh','jkhc','kssj','jssj','jhx'],
      quSee:false,
      goodsType:[],
      ships:[],
      out:false,
      page:0,
      pageSize:10,
      workKey:[],
      keys:['mtz','fcz','mtj','jhh','jkc','tk','todoPlan'],
      active:'1',
      title:'新增',
      loading:false,
      formLabelWidth:200,
      form:{},
      dialog:false,
      tableData1:[],
      tableData2:[],
      selection:[],
      tag:'',
      formList:{},
      see:false,
      myTable:[],
      tableData: [],
      path:'',
    };
  },
  // 监听,当路由发生变化的时候执行
  watch:{
    $route(to,from){
      this.getInfo()
      //console.log(to.path);
    }
  },
  mounted() {
    this.getInfo()
  },
  methods:{
    cancelForm(){
      this.dialog=false
    },
    submit(){
      let form={}
      form=JSON.parse(JSON.stringify(this.$refs.formList.form))
      form.planContainers=JSON.parse(JSON.stringify(this.selection))
      form=Object.assign(JSON.parse(JSON.stringify(this.$refs.formList1.form)),form)
      if(null!==form.id){
        this.$api.shipE(form,'TKFZ'+'_Add').then(res=>{

        }).catch()
      }else{
        this.$api.shipE(form,'TKFZ'+'_Edit').then(res=>{

        }).catch()
      }
    },
    getInfo(){
      let par=this.$route.name
      console.log(par)
      localStorage.setItem('myDate','')
      if(par==='bulkCargoH'){
        this.status=['mtmc','mtzyq','jhh','jjh','mylx','fczyq','jhzt','mtjhh','jkhc','kssj','jssj','jhx']
        this.keys=['mtz','fcz','mtj','jhh','jkc','tk','todoPlan']
        this.listKeys=['form5']
        this.path='TZFK'
      }
      if(par==='bulkCargoL'){
        this.status=['mtmc','jhh','jhzt','mtjhh','kssj','jssj','jhx']
        this.keys=['mtz','fcz','mtj','jhh','jkc','tk','startTime','endTime','todoPlan']
        this.listKeys=['form6']
        this.path='TKFZ'
      }
      if(par==='bulkCargoLB'){
        this.status=['mtmc','mtzyq','jhh','jhzt','mtjhh','tdh','kssj','jssj','jhx']
        this.keys=['mtz','fcz','mtj','jhh','tk','startTime','endTime','todoPlan']
        this.listKeys=['form7']
        this.path='TKFZ_Appoint'
      }

      if(par==='bulkCargoJz'){
        this.status=['qfh','xhzz','ysfs','wxp','wxpun','temp','tempU','csdm','gyc','fjcz',
          'cxbz','qcc','hcc','zcc','ycc','cg']
        this.keys=['mtj','mtz','jhh','startTime','tk','todoPlan']
        //'myl'
        //this.listKeys=['form7']
        this.path='JZ'
      }
      //let url = par.split('/')[5]
      //let tag = null

      /*this.tag=tag
      let param={
        planTag:tag,
        page:1,
        pageSize:10
      }
      param=Object.assign(param,this.$refs.search.form)
      this.$api.paginQuery(param).then(res=>{
        this.tableData=res.data.data
      })*/
    },
    handleClick(row) {
      console.log(row);
    },
    planTag(){
      let par=this.$route.name
      if(par!=='bulkCargoL'){
        this.$router.push({
          name:'bulkCargoList',
          query:{
            path:this.path,
            type:this.see
          }
        })
      }else{
        this.showT=false
        this.listKeys=['form5']
        this.dialog=true
      }

    },
    add(){
      this.see=false
      this.title='新增'
      this.dialog=true
      this.$nextTick(res=>{
      })
    },
    delBat(){

    },
  },
}
</script>

<style scoped lang="scss">
.myPage{
  background: #fff;
  padding: 20px;
}
:deep .el-table__empty-block {
  justify-content: flex-start!important;
}
</style>
